<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echars 测试</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }

        .echarsBox,
        .echarBox2,
        .echarBox3,
        .echarBox4,
        .echarBox5,
        .echarBox6 {
            width: 500px;
            height: 500px;
            background-color: #eee;
            border: 5px solid #fff;
        }

        .fl {
            float: left;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="echarsBox fl" id="echarBox"></div>
        <div class="echarsBox fl" id="echarBox2"></div>
        <div class="echarsBox fl" id="echarBox3"></div>
        <div class="echarsBox fl" id="echarBox4"></div>
        <div class="echarsBox fl" id="echarBox5"></div>
        <div class="echarsBox fl" id="echarBox6"></div>
    </div>
    <!-- <script src="./js/echarts.js"></script> -->
    <script src="../js/echarts.js"></script>
    <script src="../js/echarts.js"></script>

    <script>
        // echarts 常用API 总结

        let option3 = {
            title: {
                show: false,
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                icon: 'circle', // 图例icon 的形状
                left: 'left',
                textStyle: {
                    color: 'black',
                    fontSize: 14
                },
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [{
                        value: 335,
                        name: '直接访问'
                    },
                    {
                        value: 310,
                        name: '邮件营销'
                    },
                    {
                        value: 234,
                        name: '联盟广告'
                    },
                    {
                        value: 135,
                        name: '视频广告'
                    },
                    {
                        value: 1548,
                        name: '搜索引擎'
                    }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10, // 
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        let myChart3 = echarts.init(document.getElementById('echarBox3'))
        myChart3.setOption(option3)
        // 示例横向
        var arr = {}
        arr.fhId = 'echarBox' //负荷的id
        arr.fhArr = [{
                name: '10kv金羊线',
                value: '10'
            },
            {
                name: '10kv金海线',
                value: '20'
            },
            {
                name: '10kv金东线',
                value: '30'
            },
            {
                name: '10kv金澳线',
                value: '45'
            },
            {
                name: '10kv金叶线',
                value: '55'
            },
        ]
        initEchartsFh(arr)

        function initEchartsFh(arr) {
            var fhArr = arr.fhArr
            var data1 = [] //可用数据
            var data2 = []
            var data3 = [] //不可用数据
            var data4 = [] //配置项
            for (i in fhArr) {
                data1.push(fhArr[i].value)
                data2.push(fhArr[i].name)
            }
            for (m in data1) {
                data3.push(100 - parseInt(data1[m]))
            }
            var nowNum = 0
            for (n in data1) {
                var nowA = {}
                nowA.value = data1[n] + '%'
                nowA.xAxis = nowNum
                nowA.yAxis = 110
                data4.push(nowA)
                nowNum++
            }
            var myChart = echarts.init(document.getElementById(arr.fhId))
            var option = {
                textStyle: {
                    // fontSize: arr.initHeight,
                    color: '#fff', //字体颜色
                },
                tooltip: {
                    trigger: 'axis',
                    textStyle: {
                        //   fontSize: arr.initHeight,
                        color: '#fff', //字体颜色
                    },
                    formatter: function (params) {
                        return params[0].name + ': ' + params[0].value + '%'
                    },
                },

                grid: {
                    x: 90,
                    y: 120,
                    x2: 60,
                    y2: 120,
                }, //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            // fontSize: arr.initHeight,
                        },
                    },
                    data: data2,
                    axisTick: {
                        //x轴刻度线
                        show: false,
                    },
                    splitLine: {
                        //网格线
                        show: false,
                    },
                    axisLine: {
                        //坐标轴线
                        show: false,
                    },
                },
                yAxis: {
                    show: false,
                    max: 110,
                    min: 0,
                },
                series: [{
                        name: '可用',
                        type: 'bar',
                        stack: '使用情况',
                        data: data1,
                        barWidth: 30, //柱图宽度
                        itemStyle: {
                            color: function (params) {
                                var colorList = [
                                    '#C33531',
                                    '#EFE42A',
                                    '#64BD3D',
                                    '#EE9201',
                                    '#29AAE3',
                                    '#B74AE5',
                                    '#0AAF9F',
                                    '#E89589',
                                    '#16A085',
                                    '#4A235A',
                                    '#C39BD3 ',
                                    '#F9E79F',
                                    '#BA4A00',
                                    '#ECF0F1',
                                    '#616A6B',
                                    '#EAF2F8',
                                    '#4A235A',
                                    '#3498DB',
                                ]
                                return colorList[params.dataIndex]
                            },
                            barBorderRadius: [0, 0, 50, 50], // 统一设置四个角的圆角大小
                        },
                        markPoint: {
                            symbol: 'pin', //标记类型
                            symbolSize: 1, //图形大小
                            itemStyle: {
                                normal: {
                                    borderColor: '#fff',
                                    borderWidth: 1, // 标注边线线宽，单位px，默认为1
                                    label: {
                                        show: true,
                                        //   fontSize: arr.initHeight,
                                    },
                                },
                            },
                            data: data4, //配置项
                        },
                    },
                    {
                        name: '不可用',
                        type: 'bar',
                        stack: '使用情况',
                        data: data3,
                        itemStyle: {
                            color: 'rgba(255,255,255,.2)',
                            barBorderRadius: [50, 50, 0, 0], // 统一设置四个角的圆角大小
                        },
                    },
                ],
            }
            myChart.setOption(option)
            chart3 = myChart
            // myChart.on('click', function (params) {
            //   //		//电站负荷闪动
            //   powerLoad('946be6fc249e40a8a63e97e98b1c576d')
            //   alert('负荷点击事件')
            //   console.log(params)
            //   console.log(params.name + ':' + params.value + '%')
            // })
        }

        // 另一种方式实现椭圆柱状图，并且label 设置在柱状图的顶端
        var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动'];
        var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122];
        var yMax = 500;
        var dataShadow = [];

        // 将实际值显示在阴影柱的label 位置 需要对label 进行处理
        for (var i = 0; i < data.length; i++) {
            dataShadow.push({
                value: yMax,
                name: data[i]
            });
        }

        option = {
            title: {
                text: '圆角柱状图 label 顶端外侧',
                // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: false,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                name: '单位：哈哈哈/天',
                nameLocation: 'end',
                nameTextStyle: {
                    fontSize: 14,
                    color: 'red',
                    padding: [0, 0, 0, 100],
                },
                nameGap: 20,
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#999'
                    }
                },
                splitLine: {
                    show: false
                }
            },
            dataZoom: [{
                type: 'inside'
            }],
            series: [{ // For shadow
                    type: 'bar',
                    itemStyle: {
                        color: 'rgba(0,0,0,0.05)',
                        barBorderRadius: 10
                    },
                    barGap: '-100%', // 设置背景的关键代码
                    barCategoryGap: '40%',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        //label 的formatter 只能使用值 {name} 或者函数自定义值
                        formatter: function (params) {
                            return params.name
                        }
                    },
                    data: dataShadow,
                    animation: false
                },
                {
                    type: 'bar',
                    barCategoryGap: '50%',
                    itemStyle: {
                        barBorderRadius: 10,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [{
                                    offset: 0,
                                    color: '#83bff6'
                                },
                                {
                                    offset: 0.5,
                                    color: '#188df0'
                                },
                                {
                                    offset: 1,
                                    color: '#188df0'
                                }
                            ]
                        )
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{
                                        offset: 0,
                                        color: '#2378f7'
                                    },
                                    {
                                        offset: 0.7,
                                        color: '#2378f7'
                                    },
                                    {
                                        offset: 1,
                                        color: '#83bff6'
                                    }
                                ]
                            )
                        }
                    },
                    data: data
                }
            ]
        };

        let myChart2 = echarts.init(document.getElementById('echarBox2'))
        myChart2.setOption(option)
        // // Enable data zoom when user click bar.
        // var zoomSize = 6;
        // myChart.on('click', function (params) {
        //     console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        //     myChart.dispatchAction({
        //         type: 'dataZoom',
        //         startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        //         endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        //     });
        // });
    </script>
</body>

</html>